<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <style>
        span {
            color: cadetblue;
            font-size: 30px;
            margin-right: 40px;
        }
        button {
            width: 100px;
            height: 40px;
            margin-right: 40px;
        }
    </style>
</head>
<body>
<!--
  1、准备项目
  2、准备表和数据
  3、创建包和类
  4、分页工具类
  5、处理前台页面
-->
<table border="1" width="1000px" id="t1">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>生日</th>
        <th>爱好</th>
        <th>图像</th>
    </tr>

</table>
<span id="s1">当前页: </span>
<span id="s2">总页数: </span>
<span id="s3">总条数: </span>
<button id="firstPage" >首页</button>
<button id="prePage" >上一页</button>
<button id="nextPage" >下一页</button>
<button id="lastPage" >尾页</button>

</body>
</html>
<script>
    //定义一个变量存储分页工具类对象
    let pageBean;

    // onload 页面加载完成事件 js事件
    //jQuery就绪函数  页面加载之后就会执行的函数 onload的简写
    $(function () {
        pageQuery(1)
    })


    //分页查询请求的封装
    function pageQuery(currentPage) {
        //发送请求 地址   参数 当前页 mark
        $.get('student', {"mark": "pageQuery", "currentPage": currentPage}, obj => {
            //obj.dataList是学生的集合   obj.pagingQueryBean 就是分页工具类对象

            //将分页工具类对象赋值给变量
            pageBean = obj.pagingQueryBean
            //重置表格
            resetTable()
            //拼接tr
            let result = printTr(obj.dataList)

            //显示数据
            $("#t1").append(result)

            //展示分页信息
            showPageInfo()

        }, "json")
    }

    //上一页
    $("#prePage").on('click',_ => {
        pageQuery(pageBean.prePage);
    })
    //下一页
    $("#nextPage").on('click',_ => {
        pageQuery(pageBean.nextPage);
    })
    //首页
    $("#firstPage").on('click',_ => {
        pageQuery(1);
    })
    //尾页
    $("#lastPage").on('click',_ => {
        pageQuery(pageBean.totalPage);
    })



    //遍历数据拼接tr
    function printTr(obj) {
        let result = "";
        $(obj).each(function (index, value) {
            result += `
                     <tr>
                        <td>${index + 1}</td>
                        <td>${this.sname}</td>
                        <td>${this.sex}</td>
                        <td>${this.sbir.substring(0,this.sbir.length - 2)}</td>
                        <td>${this.hobby}</td>
                        <td>
                            <img src="/studentPic/${this.photo}" width="50px">
                        </td>
                    </tr>
                `;
        })
        return result
    }

    //定义方法显示当前页 总页数  总条数
    function showPageInfo() {
        $("#s1").text(`当前页:${pageBean.currentPage}`)
        $("#s2").text(`总页数:${pageBean.totalPage}`)
        $("#s3").text(`总条数:${pageBean.totalSize}`)

    }

    //重置表格
    function resetTable() {
        let tableHead = `
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>爱好</th>
                <th>图像</th>
            </tr>`
        $("#t1").html(tableHead)
    }

</script>